<template>
    <div class="page-content">
        <entity-manager apiPrefix="/manager/alarm" :fields="fields" :queryFields="queryFields" ref="entityManagerRef" class="flex-auto"
            :params="params" :withNew="false" :withDelete="false" operationsWidth="100px">
            <template #rowButtons="{ row }">
                <el-link type="primary" v-show="!row.isSuperAdmin" @click="goEdit(row)" class="mr-2" v-perm="'update'">详情</el-link>
            </template>
        </entity-manager>

        <full-panel v-model="visible" title="报警详情" @close="visible = false"  v-if="visible">
            <detail @close="visible = false" :item="editingRow" />
        </full-panel>
    </div>
</template>

<script setup>
    import fullPanel from '@/components/full-panel.vue'
    import detail from './detail.vue'
    import * as _ from 'lodash'
    import https from '@/utils/https'

    const fields = [
        { label: '报警标题', prop: 'title' },
        { label: '报警内容', prop: 'content' },
        { label: '报警等级', prop: 'level', width: '100px' },
        { label: '报警次数', prop: 'alarmCount', width: '100px' },
        { label: '首次上报时间', prop: 'createTime', width: '170px' },
        { label: '最后上报时间', prop: 'lastUpTime', width: '170px' },
        {
            label: '是否关闭', prop: 'closed', width: '80px', converter: val => {
                if (!val) {
                    return '未关闭'
                } else {
                    return '已关闭'
                }
            },
            needNew: false
        },
        { label: '关闭时间', prop: 'closeTime', width: '160px' },
    ]
    const entityManagerRef = ref()
    const params = ref({})
    const queryFields = [
        { label: '报警分类', prop: 'categoryId', type: 'select', options: loadCategory },
        { label: '设备编码', prop: 'deviceCode' },
        { label: '报警状态', prop: 'closed', type: 'select', options: [{ label: '已关闭', value: true }, { label: '未关闭', value: false }] }
    ]
    const visible = ref(false)
    const editingRow = ref()

    function goEdit(row) {
        editingRow.value = row
        visible.value = true
    }

    function loadCategory() {
        return https.post('/manager/alarm-category/query')
    }
</script>

<style lang="scss" scoped>
    .tree {
        width: 300px;
        height: calc(100vh - 120px)
    }
</style>